<template>
  <div style="width: 100%; height: 100%">
    <div class="dialogTitle">
      <div>缺陷类型分布TOP10</div>

      <div class="dialogMore" @click="$router.push('/cms/index/defectInfo')">
        更多
        <i class="el-icon-d-arrow-right" />
      </div>
    </div>
    <div class="dialogTabs">
      <div />
      <div style="display: flex">
        <div
          v-for="(item, index) in tabs"
          :key="index"
          class="dialogtabLis"
          :class="current == index ? 'dialogTabsAction' : ''"
          @click="current = index">{{ item }}</div>
      </div>
    </div>
    <div class="dialogContent">
      <div v-show="data.length" id="model1" class="dialogContent1" />
      <div v-if="data.length" class="dialogContent2">
        <div v-for="(item, index) in data" :key="index" class="dialogContent2List">
          <div class="dialogContent2List1">
            <div class="icon1" :style="{ background: color[index] }" />
            <div
              style="
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              ">{{ item.name }}</div>
          </div>
          <div class="dialogContent2List2">
            <div />
            <div>{{ item.value }}</div>
          </div>
        </div>
      </div>
      <empty v-else ref="empty" />
      <div
        v-if="data[0]"
        class="remake">（维修建议：{{ current == 0 ? '累计' : current == 1 ? '近一年' : current == 2 ? '近三月' : current == 3 ? '近一月' : '' }}{{ data[0] ? data[0].name : '-' }}发生缺陷次数较多，请重点关注）</div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import { getDefectTypeTop10 } from '@/api/cms/index/index.js'
import empty from './empty.vue'
export default {
  components: {
    empty
  },
  props: {
    typeStatus: {
      type: Number,
      default: 0
    },
    railTypes: {
      type: String,
      default: ''
    },
    deptCode: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      tabs: ['累计', '近一年', '近三月', '近一月'],
      current: 0,
      data: [

      ],
      color: [
        '#38A903',
        '#6BCF3C',
        '#84D3FF',
        '#43B6F6',
        '#3EDEDE',
        '#8AB5FF',
        '#8C84CF',
        '#EC7F4B',
        '#F6E334',
        '#F9F0BD'
      ]
    }
  },
  computed: {
    type() {
      return this.current === 0 ? null : this.current === 1 ? 12 : this.current === 2 ? 3 : this.current === 3 ? 1 : ''
    }
  },
  watch: {
    type() {
      this.init()
    },
    typeStatus() {
      this.init()
    },
    railTypes() {
      this.init()
    }
  },
  mounted() {
    this.init()
    const that = this
    window.addEventListener('resize', function() {
      that.$nextTick((_) => {
        const myChart1 = echarts.init(document.getElementById('model1'))
        myChart1.resize()
      })
    })
  },
  methods: {
    init() {
      getDefectTypeTop10({
        monthNum: this.type,
        deptCode: this.deptCode,
        type: this.typeStatus,
        railTypeList: this.railTypes.split(',')

      }).then(res => {
        this.data = res.data.data
        let title = 0
        res.data.data.forEach(item => {
          title += item.value
        })
        if (this.data.length) {
          setTimeout(() => {
            const myChart1 = echarts.init(document.getElementById('model1'))

            const option = {
              tooltip: {
                trigger: 'item',
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                },
                borderColor: 'rgba(2, 16, 41, 0.7)',
                backgroundColor: 'rgba(2, 16, 41, 0.7)', // 通过设置rgba调节背景颜色与透明
                formatter: function(params) {
                  console.log(params)
                  return `<div>缺陷类型：${params.data.name}设备缺失<br/> 缺陷数量：${params.data.value}<br/> 缺陷占比：${params.data.proportion}</div>`
                }
              },
              title: {
                text: title, // 图形标题，配置在中间对应效果图的80%
                left: 'center',
                top: '40%',
                textStyle: {
                  color: '#fff',
                  fontSize: 30,
                  align: 'center'
                },
                subtext: 'TOP10缺陷总数',
                subtextStyle: {
                  // 副标题的属性
                  color: '#fff',
                  fontSize: 14
                  // 同主标题
                }
              },
              color: [
                '#38A903',
                '#6BCF3C',
                '#84D3FF',
                '#43B6F6',
                '#3EDEDE',
                '#8AB5FF',
                '#8C84CF',
                '#EC7F4B',
                '#F6E334',
                '#F9F0BD'
              ],
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  center: ['50%', '50%'],
                  radius: ['55%', '71%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: false,
                      fontSize: '40',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: res.data.data
                }
              ]
            }
            myChart1.setOption(option)
          }, 500)
        }
      })
    }
  }
}
</script>

<style scoped>
.dialogTitle {
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  height: 50px;
  padding: 0 20px;
}
.dialogMore {
  color: #66ffff;
  cursor: pointer;
}
.dialogTabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 36px;
}
.dialogTabsAction {
  background: #0a2b52 !important;
  border: 1px solid #66ffff !important;
  box-sizing: border-box;
  color: rgba(102, 255, 255, 1) !important;
}
.dialogtabLis {
  padding: 0 12px;
  height: 36px;
  background: #0f1f56;
  border: 1px solid rgba(84, 113, 255, 0.6);
  line-height: 36px;
  text-align: center;
  font-weight: 350;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.dialogContent {
  display: flex;
  height: calc(100% - 96px);
  flex-wrap: wrap;
}
.dialogContent1 {
  width: 55%;
  height: 90%;
}
.dialogContent2 {
  width: 45%;
  height: 90%;
  padding-right: 20px;
}
.dialogContent2List {
  display: flex;
  font-size: 14px;
  height: 10%;
  justify-content: space-between;
}
.dialogContent2List1 {
  width: 70%;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
}
.dialogContent2List2 {
  width: 30%;
  display: flex;
  align-items: center;
  color: #fff;
  text-align: right;
  justify-content: space-between;
}
.icon1 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin-right: 5px;
}
.remake {
  font-size: 14px;
  width: 100%;
  text-align: center;
  color: #c0796a;
}
</style>
